<!--
 * @FilePath     : /study_code/jquery/api-data.html
 * @Description  : jqCollection.data() jq 存储数据的 api；jqCollection.removeData() jq 移除存储的数据的 api。
 * @Date         : 2025-04-17 09:48:25
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-17 10:23:02
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <!-- <link rel="stylesheet" href="" /> -->
  </head>
  <body>
    <button id="btn1">1、先获取（未存，获取到的是 undefined）</button>
    <hr />
    <button id="btn2">2、给下面 “数据容器” 标签上，存储一个数据</button>
    <hr />
    <p>3、再点击按钮1</p>
    <hr />
    <button id="btn4">4、再设置同名 key 的值；</button>
    <hr />
    <p>5、再点击按钮1</p>
    <hr />
    <button id="btn6">6、移除某个 key 的值；</button>
    <hr />
    <p>7、再点击按钮1</p>
    <hr />
    <button id="btn10">10、获取 h5 标签上的 data-xxx 属性定义的数据</button>
    <hr />
    <div id="demo-test">数据容器</div>

    <div id="demo-test2" data-str="fyg-data-99">data-xxx 属性定义的数据</div>

    <script src="/jquery/dist/jquery.min.js"></script>
    <script>
      $('#btn1').on('click', function () {
        console.log(1, '获取存储数据', $('#demo-test').data('blah'))
        /*
        log1: 未存之前
        1 '获取存储数据' undefined

        log3:
        1 '获取存储数据' 'hello jq api data'
        但是此时标签上并没有 data-blah

        log5:
        1 '获取存储数据' 996

        log7:
        1 '获取存储数据' undefined
        */
      })

      $('#btn2').on('click', function () {
        console.log(2, '存储数据')
        $('#demo-test').data('blah', 'hello jq api data')
      })

      $('#btn4').on('click', function () {
        console.log(4, '设置同名 key 的值')
        $('#demo-test').data('blah', 996)
      })

      $('#btn6').on('click', function () {
        console.log(6, '移除数据存储')
        $('#demo-test').removeData('blah')
      })

      $('#btn10').on('click', function () {
        console.log(10, '获取数据', $('#demo-test2').data('str'))
        // 10 '获取数据' 'fyg-data-99'
      })
    </script>
  </body>
</html>
